<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>药交所60小时倒计时</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link type="text/css" href="css/tween.css" rel="stylesheet">

</head>

<body>
    <script type="text/javascript" src="js/tweenMax.min.js"></script>
    <div class="wrap">
        <!-- <h1>药交所60小时 <strong>倒计时</strong></h1> -->

        <div class="countdown">
            <div class="bloc-time day" data-init-value="0">


                <span class="count-title">天</span>

                <div class="figure days days-1">
                    <span class="top">0</span>
                    <span class="top-back">
                        <span>0</span>
                    </span>
                    <span class="bottom">0</span>
                    <span class="bottom-back">
                        <span>0</span>
                    </span>
                </div>

                <div class="figure days days-2">
                    <span class="top"
                        style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">0</span>
                    <span class="top-back" style="">
                        <span>0</span>
                    </span>
                    <span class="bottom">0</span>
                    <span class="bottom-back">
                        <span>0</span>
                    </span>
                </div>

                <div class="figure days days-3">
                    <span class="top">0</span>
                    <span class="top-back">
                        <span>0</span>
                    </span>
                    <span class="bottom">0</span>
                    <span class="bottom-back">
                        <span>0</span>
                    </span>
                </div>

            </div>

            <div class="bloc-time hours" data-init-value="0">


                <span class="count-title">时</span>

                <div class="figure hours hours-1">
                    <span class="top">0</span>
                    <span class="top-back">
                        <span>0</span>
                    </span>
                    <span class="bottom">0</span>
                    <span class="bottom-back">
                        <span>0</span>
                    </span>
                </div>

                <div class="figure hours hours-2">
                    <span class="top"
                        style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">0</span>
                    <span class="top-back" style="">
                        <span>0</span>
                    </span>
                    <span class="bottom">0</span>
                    <span class="bottom-back">
                        <span>0</span>
                    </span>
                </div>
            </div>

            <div class="bloc-time min" data-init-value="0">
                <span class="count-title">分</span>

                <div class="figure min min-1">
                    <span class="top"
                        style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">0</span>
                    <span class="top-back" style="">
                        <span>0</span>
                    </span>
                    <span class="bottom">0</span>
                    <span class="bottom-back">
                        <span>0</span>
                    </span>
                </div>

                <div class="figure min min-2">
                    <span class="top"
                        style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">0</span>
                    <span class="top-back" style="">
                        <span>0</span>
                    </span>
                    <span class="bottom">0</span>
                    <span class="bottom-back">
                        <span>0</span>
                    </span>
                </div>
            </div>

            <div class="bloc-time sec" data-init-value="0">
                <span class="count-title">秒</span>

                <div class="figure sec sec-1">
                    <span class="top"
                        style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">0</span>
                    <span class="top-back" style="">
                        <span>0</span>
                    </span>
                    <span class="bottom">0</span>
                    <span class="bottom-back">
                        <span>0</span>
                    </span>
                </div>

                <div class="figure sec sec-2">
                    <span class="top"
                        style="transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);">0</span>
                    <span class="top-back" style="">
                        <span>0</span>
                    </span>
                    <span class="bottom">0</span>
                    <span class="bottom-back">
                        <span>0</span>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        function date_format(micro_second) {
            // 总秒数
            var second = Math.floor(micro_second / 1000);
            // 天数
            var day = Math.floor(second / 3600 / 24);
            // 小时
            var hr = Math.floor(second / 3600 % 24);
            // 分钟
            var min = Math.floor(second / 60 % 60);
            // 秒
            var sec = Math.floor(second % 60);
            // return day + "天" + hr + "小时" + min + "分钟" + sec + "秒";
            return [day, hr, min, sec]
        };
        // Create Countdown
        var Countdown = {

            // Backbone-like structure
            $el: $('.countdown'),

            // Params
            countdown_interval: null,
            total_seconds: 0,

            // Initialize the countdown  
            init: function () {

                // DOM
                this.$ = {
                    days: this.$el.find('.bloc-time.day .figure'),
                    hours: this.$el.find('.bloc-time.hours .figure'),
                    minutes: this.$el.find('.bloc-time.min .figure'),
                    seconds: this.$el.find('.bloc-time.sec .figure')
                };
                // 目标60小时倒计时 '2021/7/19 11:59:59'
                var now = new Date()
                var target = new Date('2021/10/31 23:59:59').getTime();
                // 剩余时间
                var num = target - now

                var dates = date_format(num)

                // Init countdown values
                this.values = {
                    day: dates[0],
                    hours: dates[1],//this.$.hours.parent().attr('data-init-value'),
                    minutes: dates[2], //this.$.minutes.parent().attr('data-init-value'),
                    seconds: dates[3] //this.$.seconds.parent().attr('data-init-value'),
                };
                console.log(this.values)

                // Initialize total seconds
                this.total_seconds = (this.values.day * 24*60*60) + (this.values.hours * 60 * 60) + (this.values.minutes * 60) + this.values.seconds;

                // Animate countdown to the end 
                this.count();
            },

            count: function () {

                var that = this,
                    $day_1 = this.$.days.eq(0),
                    $day_2 = this.$.days.eq(1),
                    $day_3 = this.$.days.eq(2),
                    $hour_1 = this.$.hours.eq(0),
                    $hour_2 = this.$.hours.eq(1),
                    $min_1 = this.$.minutes.eq(0),
                    $min_2 = this.$.minutes.eq(1),
                    $sec_1 = this.$.seconds.eq(0),
                    $sec_2 = this.$.seconds.eq(1);

                this.countdown_interval = setInterval(function () {

                    if (that.total_seconds > 0) {

                        --that.values.seconds;

                        if (that.values.minutes >= 0 && that.values.seconds < 0) {

                            that.values.seconds = 59;
                            --that.values.minutes;
                        }

                        if (that.values.hours >= 0 && that.values.minutes < 0) {

                            that.values.minutes = 59;
                            --that.values.hours;
                        }

                        if (that.values.day >= 0 && that.values.hours < 0) {

                            that.values.hours = 23;
                            --that.values.day;
                        }

                        // Update DOM values
                        // day
                        that.checkDay(that.values.day, $day_1, $day_2,$day_3);
                        // Hours
                        that.checkHour(that.values.hours, $hour_1, $hour_2);

                        // Minutes
                        that.checkHour(that.values.minutes, $min_1, $min_2);

                        // Seconds
                        that.checkHour(that.values.seconds, $sec_1, $sec_2);

                        --that.total_seconds;
                    }
                    else {
                        console.log('end',that.values,that.total_seconds)
                        clearInterval(that.countdown_interval);
                    }
                }, 1000);
            },

            animateFigure: function ($el, value) {

                var that = this,
                    $top = $el.find('.top'),
                    $bottom = $el.find('.bottom'),
                    $back_top = $el.find('.top-back'),
                    $back_bottom = $el.find('.bottom-back');

                // Before we begin, change the back value
                $back_top.find('span').html(value);

                // Also change the back bottom value
                $back_bottom.find('span').html(value);

                // Then animate
                TweenMax.to($top, 0.8, {
                    rotationX: '-180deg',
                    transformPerspective: 300,
                    ease: Quart.easeOut,
                    onComplete: function () {

                        $top.html(value);

                        $bottom.html(value);

                        TweenMax.set($top, { rotationX: 0 });
                    }
                });

                TweenMax.to($back_top, 0.8, {
                    rotationX: 0,
                    transformPerspective: 300,
                    ease: Quart.easeOut,
                    clearProps: 'all'
                });
            },

            checkHour: function (value, $el_1, $el_2) {

                var val_1 = value.toString().charAt(0),
                    val_2 = value.toString().charAt(1),
                    fig_1_value = $el_1.find('.top').html(),
                    fig_2_value = $el_2.find('.top').html();

                if (value >= 10) {

                    // Animate only if the figure has changed
                    if (fig_1_value !== val_1) this.animateFigure($el_1, val_1);
                    if (fig_2_value !== val_2) this.animateFigure($el_2, val_2);
                }
                else {

                    // If we are under 10, replace first figure with 0
                    if (fig_1_value !== '0') this.animateFigure($el_1, 0);
                    if (fig_2_value !== val_1) this.animateFigure($el_2, val_1);
                }
            },

            checkDay: function (value, $el_1, $el_2, $el_3) {
                if(value < 100){
                    value = '0' + value
                }
                if(value < 10){
                    value = '0' + value
                }
                var val_1 = value.toString().charAt(0),
                    val_2 = value.toString().charAt(1),
                    val_3 = value.toString().charAt(2),
                    fig_1_value = $el_1.find('.top').html(),
                    fig_2_value = $el_2.find('.top').html();
                    fig_3_value = $el_3.find('.top').html();
                
                if (fig_1_value !== val_1) this.animateFigure($el_1, val_1);
                if (fig_2_value !== val_2) this.animateFigure($el_2, val_2);
                if (fig_3_value !== val_3) this.animateFigure($el_3, val_3);
             
            }
        };

        // Let's go !
        Countdown.init();
    </script>
</body>

</html>
